import QtQuick 2.6
import QtQuick.Layouts 1.2

import "../../Base/UiBase"
import "../../Base/Config"

Item {
    id: root

    property string activeButtonName:"multi"

    Rectangle {
        color: Color.main
        anchors {
            left: parent.left
            right: parent.right
        }
        height: 96 * Size.ratio

        Rectangle {
            width: row.width
            height: 66 * Size.ratio
            anchors.centerIn: parent
            radius: 10 * Size.ratio
            color: Color.mainDarker

            Row
            {
                id: row
                z: 1
                height: parent.height
                spacing: 0
                Item {
                    id: multiButton
                    anchors.verticalCenter: parent.verticalCenter
                    width: 150 * Size.ratio
                    height: 66 * Size.ratio
                    Text {
                        id: tcText

                        anchors {
                            horizontalCenter: parent.horizontalCenter
                            verticalCenter: parent.verticalCenter
                        }
                        text: "众评"
                        font.pixelSize: Size.largeFont

                        color: root.activeButtonName === "multi" ? "#4baff9" : "#FFFFFF"
                        Behavior on color {
                            PropertyAnimation { easing.type: Easing.InOutExpo; duration:250 }
                        }
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            activeButtonName = "multi"
                        }
                    }
                }
                Item {
                    id:p2pButton
                    anchors.verticalCenter: parent.verticalCenter

                    width: 150 * Size.ratio
                    height: 66 * Size.ratio
                    Text {
                        id:newestText
                        anchors {
                            horizontalCenter: parent.horizontalCenter
                            verticalCenter: parent.verticalCenter
                        }
                        text: "专评"
                        font.pixelSize: Size.largeFont
                        color: root.activeButtonName === "p2p" ? "#4baff9" : "#FFFFFF"
                        Behavior on color {
                            PropertyAnimation { easing.type: Easing.InOutExpo; duration:250 }
                        }
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            activeButtonName = "p2p"
                        }
                    }
                }
            }

            Rectangle {
                id: whiteBlock
                color: "white"
                width: 150 * Size.ratio
                height: 66 * Size.ratio
                x: {
                    if(root.activeButtonName === "multi")
                        return multiButton.x
                    else
                        return p2pButton.x
                }

                radius: parent.radius
                Behavior on x {
                    NumberAnimation { duration: 250; easing.type: Easing.InOutExpo }
                }
                Behavior on width {
                    NumberAnimation { duration: 250; easing.type: Easing.InOutExpo }
                }
            }
        }
    }

    ImageButton {
        id: messagesButton
        anchors{
            right: parent.right
            verticalCenter: parent.verticalCenter
        }

        width: Size.ratio * 80
        height: Size.ratio * 96

        source: messageContext.visible ? "../../../resources/tcommunity/navBar/xinxi02.svg" : "../../../resources/tcommunity/navBar/xinxi01.svg"
        onClicked: messageContext.visible = !messageContext.visible
        MessageContext {
            id: messageContext
            visible: false
            anchors {
                top: parent.bottom
                right: parent.right
                rightMargin: 21 * Size.ratio
            }
        }
    }
}
